<template>
    <div class="inspection-add">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk"
            :dialog-style="{ top: '20px' }" @cancel="modalOption.onCancel" :okText="modalOption.okText"
            :cancelText="modalOption.cancelText" class="yuan-modal inspection-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">{{detailData.varietyName}}</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="批号" prop="1">
                                <span class="yuan-form-show">{{ detailData.detectionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库时间" prop="2">
                                <span class="yuan-form-show">{{ detailData.enterStorageTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库类型" prop="3">
                                <span class="yuan-form-show">{{ enterStorageTypeObj[detailData.enterStorageType] ||'--' }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="数量" prop="4">
                                <span class="yuan-form-show">{{ detailData.num }}{{detailData.unit}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="状态" prop="5">
                                <span class="yuan-form-show">{{ detailData.detectionState===0?'未检测':'已检测' }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="上次报告日期" prop="6">
                                <span class="yuan-form-show">{{ detailData.reportTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="中药等级" prop="0">
                                <span class="yuan-form-show">{{ detailData.medicineClass }}</span>
                            </a-form-model-item>
                            <template v-if="rawType==='成品'">
                                <a-form-model-item class="yuan-form-item" label="主批号" prop="7">
                                    <span class="yuan-form-show">{{ detailData.advocateBatch }}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="亚批号" prop="8">
                                    <span class="yuan-form-show">{{ detailData.secondBatch }}</span>
                                </a-form-model-item>
                            </template>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">检测</div>
                        <div class="form-panel-box">
                            <a-row>
                                <a-form-model-item class="yuan-form-item" label="检测机构" prop="detectionOrganizationId">
                                    <a-select class="yuan-form-input" style="width: 100%" v-model="formData.detectionOrganizationId" placeholder="请选择"
                                              @change="testingChange">
                                        <a-select-option :value="item.id" v-for="item in testingList" :key="item.id">{{item.name}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-row>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="检测负责人" prop="detectionPrincipal">
                                <a-input class="yuan-form-input" v-model="formData.detectionPrincipal" placeholder=""
                                    disabled></a-input>

                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-row-item" label="检测依据" prop="1">
                                 <a-select class="yuan-form-input" style="width: 230px" v-model="formData.gistId" placeholder="请选择">
                                    <a-select-option :value="item.id" @change="getExecuteStandard"
                                        v-for="item in checkBasisList">{{item.executeStandard}}</a-select-option>
                                </a-select>
                                <a-button class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/checkBasisMgt')">
                                    检测依据
                                </a-button>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="检测结果" prop="detectionResult">
                                <a-radio-group v-model="formData.detectionResult"
                                    :options="[{ 'label': '合格', value: 1 }, { 'label': '不合格', value: 2 }]" :default-value="1" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="报告日期" prop="reportTime">
                                <a-date-picker class="yuan-form-input" valueFormat="YYYY-MM-DD" v-model="formData.reportTime"
                                    placeholder="选择日期" />
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="检测报告" prop="name1" class="yuan-form-item" v-if="pageReady">
                                <Upload :uploadLength="1" @uploadChange="uploadChange" :defImgList="detectionReport" />
                                <div class="upload-tips">jpg.png.gif格式.不超过1MB</div>
                            </a-form-model-item>

                        </div>
                    </div>
                </a-form-model>
            </a-spin>

        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { DetectionListRes, ProListRes, TestingListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) rawType!: string;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
        this.modalOption.title = this.infoId ? "编辑检测" : "新增检测";
    }
    pageReady = false;
    formLoading = false;
    enterStorageTypeObj = {
        SY: "溯源入库",
        NSY: "非溯源入库",
        CG: "采购入库",
    };
    modalOption = {
        title: "新增检测",
        okText: "提交",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        detectionOrganizationId: [{ required: true, message: "请选择检测机构", trigger: "blur" }],
        detectionResult: [{ required: true, message: "请选择检测结果", trigger: "blur" }],
        reportTime: [{ required: true, message: "请选择报告日期", trigger: "blur" }],
    };
    formData: any = {};
    detailData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    getExecuteStandard() {
        const selectCheckBasis = this.checkBasisList.find((item) => item.id === this.formData.gistId);
        if (selectCheckBasis) this.formData.executeStandard = selectCheckBasis.executeStandard;
    }
    closeModal() {
        this.resetForm();
        this.pageReady = false;
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.formLoading = true;
                try {
                    
                    const res = await nextApi.editCheckout({
                        ...this.formData,
                        rawType: this.rawType,
                        testArticleBatch:this.detailData.batch,
                        id: this.detailData.id + "",

                        detectionReport: this.detectionReport.join(";"),
                    });
                    this.$message.success(res.msg);
                    this.closeModal();
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    detectionReport: string[] = [];
    uploadChange(e: { url: string }[]) {
        this.detectionReport = e.map((item) => item.url);
    }

    async getDetail() {
        await this.getTesting();
        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getCheckoutDetail({ id: this.infoId, rawType: this.rawType });
                this.detailData = { ...res.data };
                this.detectionReport = res.data.detectionReport ? res.data.detectionReport.split(";") : [];
                await this.getCheckBasisList();
            } else {
                this.detailData = {};
                this.detectionReport = [];
            }
            this.formData = { detectionResult: 1 };
            this.pageReady = true;
        } finally {
            this.formLoading = false;
            this.formData.gistId = this.checkBasisList[0].id;
            this.formData.detectionOrganizationId = this.testingList[0].id;
            this.testingChange();
        }
    }
    testingList: TestingListRes[] = [];
    async getTesting() {
        if (this.testingList && this.testingList.length > 0) return;
        try {
            this.formLoading = true;
            const res = await nextApi.getTestingList({});
            this.testingList = res.data?.rows || [];
        } finally {
            this.formLoading = false;
        }
    }
    testingChange() {
        const find = this.testingList.find((item) => item.id === this.formData.detectionOrganizationId);
        if (find) {
            this.formData.detectionOrganization = find.name;
            this.formData.detectionPrincipal = find.principal;
        }
    }
    checkBasisList: DetectionListRes[] = [];
    async getCheckBasisList() {
        if (this.checkBasisList && this.checkBasisList.length > 0) return;
        try {
            this.formLoading = true;
           const res = await nextApi.getDetectionListNew({ varietyName:this.detailData.varietyName,rawType: this.rawType,productionTime:this.detailData.productionTime });
            this.checkBasisList = [res.data];
        } finally {
            this.formLoading = false;
        }
    }
    jump(url: string) {
        window.open(url);
    }
}
</script>
<style lang="scss">
.inspection-add-modal {
    .upload-tips {
        font-size: 12px;
        line-height: 20px;
        padding-bottom: 5px;
        color: #05b089;
    }
}
</style>
